<template>
  <el-card class="headerCard">
    <el-row type="flex" justify="space-between">
      <div class="before-box" v-if="$slots.before">
        <i class="el-icon-info" />
        <slot name="before"></slot>
      </div>
      <div class="after-box">
        <slot name="after"> </slot>
      </div>
    </el-row>
  </el-card>
</template>

<script>
export default {};
</script>

<style lang="scss" scoped>
.headerCard {
  margin-bottom: 10px;
}
.before-box {
  font-size: 14px;
  padding: 0 10px;
  border: 1px solid #91d5ff;
  border-radius: 3px;
  background-color: #e6f7ff;
  height: 40px;
  line-height: 40px;

  .el-icon-info {
    color: #409eff;
    margin-right: 5px;
  }
}
.after-box {
  flex: 1;
  display: flex;
  justify-content: flex-end;
}
</style>
